import { FC, memo, useEffect, useState } from 'react'
import { Modal, Table, Button } from 'antd'
import { Dispatch, Loading, EvaluationStateType, connect } from 'umi'
import SendRemind from './components/send-remind'
import styles from './index.less'
interface IProps {
  visible: boolean
  dispatch: Dispatch
  payload: {
    batchCode: string
    questionCode: string
  }
  evaluationModel: EvaluationStateType
  hide: () => any
}
const UnUploadSchool: FC<IProps> = ({
  visible,
  dispatch,
  payload: { batchCode, questionCode },
  evaluationModel,
  hide
}) => {
  const { unUploadSchool } = evaluationModel
  const [pageNum, setPageNum] = useState<number>(1)
  const [pageSize, setPageSize] = useState<number>(10)
  const [total, setTotal] = useState<number>(0)
  const [record, setRecord] = useState<any>(undefined)
  const [modalShow, setModalShow] = useState<boolean>(false)
  const handleOk = () => {}
  const handleCancel = () => {
    hide()
  }
  const handlePageChange = (page: number, pageSize: number) => {
    setPageNum(page)
    setPageSize(pageSize)
  }

  const sendRemind = (record: any) => {
    setRecord(record)
    setModalShow(true)
  }

  const columns: any[] = [
    {
      title: '序号',
      key: 'index',
      render: (text: string, record: any, index: number) => {
        return (
          <span>
            {((pageNum - 1) * pageSize + index + 1).toString().padStart(2, '0')}
          </span>
        )
      },
      align: 'center'
    },
    {
      title: '学校名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center'
    },
    {
      title: '操作',
      dataIndex: 'count',
      key: 'count',
      align: 'center',
      render: (text: string, record: any) => {
        return (
          <span
            className={styles['send-warning']}
            onClick={() => sendRemind(record)}
          >
            发送提醒
          </span>
        )
      }
    }
  ]

  const paginationProps = {
    current: pageNum, //当前页码
    pageSize, // 每页数据条数
    showTotal: () => <span>总共{total}项</span>,
    total, // 总条数
    onChange: (page: number, pageSize: number) =>
      handlePageChange(page, pageSize), //改变页码的函数
    hideOnSinglePage: false,
    showSizeChanger: true
  }

  // 学校上传进度查询
  const getUnaccomplishedUnit = () => {
    dispatch({
      type: 'evaluationModel/function_getUnaccomplishedUnit',
      payload: { batchCode, questionCode }
    })
  }

  useEffect(() => {
    if (visible) {
      getUnaccomplishedUnit()
    } else {
      setPageNum(1)
      setPageSize(10)
    }
  }, [visible])
  useEffect(() => {
    setTotal(unUploadSchool.length)
  }, [unUploadSchool])
  return (
    <>
      <Modal
        title="未上传材料学校"
        open={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        width="60%"
        okText="确认"
        cancelText="取消"
        bodyStyle={{
          height: `${window.innerHeight * 0.5}px`,
          overflowY: 'auto'
        }}
        maskClosable={false}
        footer={[<Button onClick={handleCancel}>关闭</Button>]}
      >
        <Table
          dataSource={unUploadSchool}
          columns={columns}
          rowKey="code"
          pagination={paginationProps}
        />

        {/* 发送预警 */}
        <SendRemind
          visible={modalShow}
          record={record}
          hide={() => {
            setModalShow(false)
          }}
        />
      </Modal>
    </>
  )
}

const mapStateToProps = ({
  evaluationModel,
  loading
}: {
  evaluationModel: EvaluationStateType
  loading: Loading
}) => {
  return {
    evaluationModel,
    evaluationLoding: loading.models.evaluationModel
  }
}

export default connect(mapStateToProps)(memo(UnUploadSchool))
